<template>
  <div>
    <div class="data_grid">
      <table width="100%" cellspacing="0" cellpadding="0">
        <thead>
        <tr>
          <th v-for="item in data.columns" :key="item" v-align="align(item)" :width="item.width">{{item.title}}</th>
        </tr>
        </thead>

        <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <template v-for="column in data.columns">
            <td v-if="column.field" v-align="align(column)" :width="column.width">
              <span v-if="column.formatter" v-html="column.formatter(item)"></span>
              <span v-else>{{item[column.field]}}</span>
            </td>
            <td v-else v-align="align(column)" :width="column.width">
              <el-button v-for="operate in column.operate" :key="operate" type="text" @click="operate.handle(index, item)">{{operate.name}}</el-button>
            </td>
          </template>
        </tr>
        </tbody>
      </table>
    </div>

    <pagination v-if="data.pagination" />
  </div>
</template>

<script>
  import {mixins} from "@/core";

  export default {
    mixins: [mixins],
    props: {
      data: {
        type: Object,
        default: function () {
          return {};
        }
      }
    },
    data () {
      return {
        API: {
        	query: this.data.url,
          deleteUrl: this.data.deleteUrl
        }
      }
    },
    methods: {
      align (item) {
        return this.data.align ? this.data.align : item.align ? item.align : '';
      }
    }
  }
</script>
<style scoped lang="scss">
  table .el-button {
    margin-bottom: 0 !important;
  }

  .data_grid {
    background-color: #fff;
    padding: 20px;

    table {
      width: 100%;
      font-size: 12px;
      border: none;
    }

    th, td {
      height: 50px;
      padding-left: 20px;
      text-align: left;

      &.is-center {
        text-align: center;
      }
    }

    thead tr {
      font-size: 16px;
      background-color: #e8f0f6;
      color: #4e5358;
    }

    tbody {
      font-size: 14px;
      color: #4e5358;

      tr:nth-child(2n) {
        background-color: #e8f0f6;
      }
    }
    & /deep/ .space {
      display: inline-block;
      width: 20px;
    }

    & /deep/ .fa {
      cursor: pointer;
      width: 20px;
      text-align: center;
      margin-left: -20px;
      margin-right: -3px;
    }

    .el-button--text {
      padding: 0;
    }
  }
</style>
